﻿@model SYTradingPublicSite.ViewModels.GloveViewModel

@{
    ViewBag.Title = "Details";
}

<div class="container-fluid detail-page GlovePage">
    <div class="row-fluid">
        <div class="span3">
            @Html.Partial("SidebarNav")
        </div>
        <!--/span-->
        <div class="span9">
            <div class="row-fluid">
                <div class="span4">
                    <ul>
                        @foreach (SYTradingPublicSite.Models.ImagePath img in Model.Gloves[0].ImagePaths)
                        {
                            <li style="margin-bottom: 20px;">
                                <a class="group1" href="@img.Path" title="@img.Glove.Name">
                                    <img src="@img.Path" class="img-polaroid" />
                                </a>
                            </li>
                        }
                    </ul>

@*                        <!-- To use flexslider -->
                    <div class="flexslider">
                        <ul class="slides">
                            @foreach (SYTradingPublicSite.Models.ImagePath img in Model.Gloves[0].ImagePaths)
                            {
                                <li data-thumb="data:image/png;base64,@img.ThumbnailString">
                                    <img src="@img.Path" />
                                </li>
                            }
                        </ul>                        
                    </div>*@

@*                        <!-- To use colorbox -->
                    @foreach (SYTradingPublicSite.Models.ImagePath img in Model.Gloves[0].ImagePaths)
                    {
                        <a class="group1" href="@img.Path" title="@img.Glove.Name">
                            <img src="@img.Path" class="img-polaroid" /></a>
                    }*@
                </div>
                <!--/span-->
                <div class="span8">
                    <fieldset>
                        <legend>@Html.DisplayFor(model => model.Gloves[0].Name)</legend>    
                        <div class="display-label">
                            @Html.DisplayNameFor(model => model.Gloves[0].Description)
                        </div>
                        <div class="display-field">
                            @Html.DisplayFor(model => model.Gloves[0].Description)
                        </div>
                        <br />
                        <div class="display-label">
                            Applications
                        </div>
                        <div class="display-field">
                            @foreach (var item in Model.Gloves[0].GloveApplications)
                            {
                                @:* @Html.DisplayFor(modelItem => item.Application.Name) <br />
                            }
                        </div>
                        <br />
@*                        testing purpose table
                        <div id="container" style="display:table; border: 1px solid black;">
                          <div id="row" style="display:table-row">

  	                        <div id="left" style="display:table-cell; background-color:red; padding: 10px;">
  		                        <p>@Html.DisplayFor(model => model.Gloves[0].ItemNo)</p>
  	                        </div>

  	                        <div id="middle1" style="display:table-cell; background-color:green; padding: 10px;">
  		                        <p>@Html.DisplayFor(model => model.Gloves[0].Material.Name)</p>
  	                        </div>

                            <div id="middle2" style="display:table-cell; background-color:blue; padding: 10px;">
  		                        <p>@Html.DisplayFor(model => model.Gloves[0].Sizes)</p>
  	                        </div>

  	                        <div id="right" style="display:table-cell; background-color:orange; padding: 10px;">
    	                        <p>@Html.DisplayFor(model => model.Gloves[0].Colors)</p>
  	                        </div>

	                        </div>
                        </div>
                        <br />*@
                        <div class="row-fluid detail-table">
                            <div class="span3">
                                <div class="display-label">@Html.DisplayNameFor(model => model.Gloves[0].ItemNo)</div>
                                <div class="display-field">@Html.DisplayFor(model => model.Gloves[0].ItemNo)</div>
                            </div>
                            <div class="span1andhalf">
                                <div class="display-label">Material</div>
                                <div class="display-field">@Html.DisplayFor(model => model.Gloves[0].Material.Name)</div>
                            </div>
                            <div class="span3">
                                <div class="display-label">@Html.DisplayNameFor(model => model.Gloves[0].Sizes)</div>
                                <div class="display-field">@Html.DisplayFor(model => model.Gloves[0].Sizes)</div>
                            </div>
                            <div class="span4andhalf">
                                <div class="display-label">@Html.DisplayNameFor(model => model.Gloves[0].Colors)</div>
                                <div class="display-field">@Html.DisplayFor(model => model.Gloves[0].Colors)</div>
                            </div>
                        </div>

                        @if (Model.RelatedGloves.Count > 0)
                        {
                            <br class="hidden-phone" />
                            <br class="hidden-phone" />
                            <div class="suggest-label">
                                @if (!string.IsNullOrEmpty(Model.selectedApplicationCategory))
                                {
                                    @:You may also like other gloves for @Model.selectedApplicationCategory
                            }
                                else if (Model.selectedMaterialID > 0)
                                {
                                    @:You may also like other @Model.Materials.Where(m => m.MaterialID == Model.selectedMaterialID).Single().Name gloves:
                            }
                            </div>
                        }
                        @for (int i = 0; i < Model.RelatedGloves.Count; i++)
                        {
                            SYTradingPublicSite.Models.Glove glove = Model.RelatedGloves[i];

                            if ((i + 1) % 6 == 1)
                            {
                            @: <div class="row-fluid show-grid">
                            }   

                                @: <div class="span2">
                                    if (glove.ImagePaths.Count > 0)
                                    {
                                        <a href="@Url.Action("Details", new { id = glove.GloveID, selectedApplicationCategory=Model.selectedApplicationCategory, selectedMaterialID=Model.selectedMaterialID })">
                                            <img src="@glove.ImagePaths.First().Path?thumbnail=true" class="img-polaroid" />
                                            <h6>@glove.ItemNo</h6>
                                        </a>
                                    }
                                @: </div>

                                    if ((i + 1) % 6 == 0 || i + 1 == Model.RelatedGloves.Count)
                                    {
                            @: </div>
                                    }
                        }
                    </fieldset>
                    <p>
                        @Html.ActionLink("Back to List", "Index", new { selectedApplicationCategory = Model.selectedApplicationCategory, MaterialID = Model.selectedMaterialID })
                    </p>
                </div>
                <!--/span-->
            </div>
            <!--/row-->
        </div>
        <!--/span-->
    </div>
    <!--/row-->
</div>
<!--/.fluid-container-->
